﻿<div
    bsModal
    #createOrEditModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="importRecordModal"
    aria-hidden="true"
    [config]="{ backdrop: 'static' }"
>
    <div class="modal-dialog modal-max">
        <div class="modal-content">
            <form *ngIf="active" #editForm="ngForm" novalidate autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        导入记录
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                <p-table
                                    #dataTable
                                    #dataTable
                                    (onLazyLoad)="getExcelDataRecord($event)"
                                    [value]="primengTableHelper.records"
                                    rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                                    [paginator]="false"
                                    [lazy]="true"
                                    [scrollable]="true"
                                    ScrollWidth="100%"
                                    [responsive]="primengTableHelper.isResponsive"
                                    [resizableColumns]="primengTableHelper.resizableColumns"
                                >
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th
                                                style="width: 130px"
                                                [hidden]="
                                                    !isGrantedAny(
                                                        'Pages.Administration.Users.Impersonation',
                                                        'Pages.Administration.Users.Edit',
                                                        'Pages.Administration.Users.ChangePermissions',
                                                        'Pages.Administration.Users.Delete'
                                                    )
                                                "
                                            >
                                                {{ l('Actions') }}
                                            </th>
                                            <th style="width: 150px" pSortableColumn="id">
                                                标题
                                                <p-sortIcon field="id"></p-sortIcon>
                                            </th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record="$implicit">
                                        <tr>
                                            <td
                                                style="width: 130px"
                                                [hidden]="
                                                    !isGrantedAny(
                                                        'Pages.Administration.Users.Impersonation',
                                                        'Pages.Administration.Users.Edit',
                                                        'Pages.Administration.Users.ChangePermissions',
                                                        'Pages.Administration.Users.Delete'
                                                    )
                                                "
                                            >
                                                <div class="btn-group dropdown" dropdown container="body">
                                                    <a
                                                        href="javascript:;"
                                                        class="btn btn-sm btn-primary"
                                                        *ngIf="permission.isGranted('Pages.Administration.Users.Edit')"
                                                        (click)="getExcelData(record.id)"
                                                        >查看数据</a
                                                    >
                                                </div>
                                            </td>
                                            <td style="width: 150px">
                                                <span class="ui-column-title">标题</span>
                                                {{ record.title }}
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                <excel-preview
                                    [fileData]="fileData"
                                    readonly="true"
                                    isSingleSheet="true"
                                ></excel-preview>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
